<template>
  <el-checkbox-group class="list" v-model="checked" @change="change">
    <!-- 板块 -->
    <el-table
      class="table"
      :data="plateList"
      stripe
      style="width: 100%; color: #fff"
      :header-cell-style="{ background: '#282c34' }"
      row-key="index"
      :cell-style="cellStyle"
    >
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="code" label="代码">
        <template #default="{ row }">
          <el-checkbox
            :label="row.code"
            :disabled="!checked.includes(row.code) && checked.length > 2"
          />
        </template>
      </el-table-column>
      <el-table-column prop="plate_name" label="名称" />
    </el-table>
  </el-checkbox-group>
</template>

<script setup>
import { takeDecimal, changeMoney } from "@/utils/base.js";
import { defaultApi } from "@/servers";
import {
  defineProps,
  defineEmits,
  toRefs,
  ref,
  computed,
  onMounted,
} from "vue";
import { useStore } from "vuex";
const store = useStore();
const emit = defineEmits(["update:value"]);
const props = defineProps({
  value: {},
});
let { value: checked } = toRefs(props);
const plateList = ref([]);
let market = computed(() => store.getters.system.market);

onMounted(() => {
  getPlateStocks();
});
function change(e) {
  emit("update:value", e);
}
// 板块列表
async function getPlateStocks() {
  let result = await defaultApi.plateList({
    market: market.value,
    type: "INDUSTRY",
  });
  plateList.value = result || [];
}

// 表格行样式
function cellStyle({ row, rowIndex }) {
  if (rowIndex % 2) {
    return { background: "#282c34" };
  } else {
    return { background: "#282c34eb" };
  }
}
</script>

<style lang="scss" scoped>
.list {
  min-height: 300px;
  height: 50vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  font-size: 16px;
  .table {
    height: 100%;
    width: 100%;
    overflow: auto;
  }
  ::v-deep .el-table {
    background: transparent !important;
  }
  ::v-deep .el-checkbox__label {
    color: #fff;
  }
}
</style>